<template>
    <div>
        <el-row class="pad">
            <el-col :lg="6" class="hidden-md-and-down" :offset="8">
                <el-input class="search" v-model="input" placeholder="查询比赛内容"></el-input>
            </el-col>
            <el-col :md="16" :sm="16" class="hidden-lg-and-up">
                <el-input class="search" v-model="input" placeholder="查询比赛内容"></el-input>
            </el-col>
            <el-col :lg="2" :md="8" :sm="8">
                <el-button @click="searchLaji"><i class="el-icon-search"></i><span class="souText">搜索</span></el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import bgimg from '@/assets/images/index_01.jpg'

export default {
    name: 'search',
    data() {
        return {
            bgimg,
            input: ''
        }
    },
    methods: {
        searchLaji(){
             this.$notify({
            title: "记得每天分类哦",
            message: this.input
            });
            
        }
    },
}
</script>
<style>
.pad{
    padding-top: 60px;
}
.souText{
    color: #f2f2f2;
    font-size: 25px;
    height: 50%;
    line-height: 50%;
}
.el-button{
    height: 54px;
    width: 100%;
}
.sou{
    height: 20px;
}
.search{
    width: 100%;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus{
    border: solid 1px #5ec74d;
}
.el-input__inner{
    border-radius:5px 0 0 5px;
    border: solid 1px #5ec74d;
    height: 55px;
    font-size: 25px;
}
.el-button{
    background-color: #5ec74d;
    border-radius:0 5px 5px 0;
    color: #f2f2f2;
    border: solid 1px #5ec74d;
}
.el-button:active,.el-button:focus,.el-button:hover{
    background-color: #5ec74d;
    border: solid 1px #5ec74d;
}
</style>